<template>
	<view class="tested_by">
		<view class="tested">
			<view class="steps">
				<u-form :rules="testFormRules" ref="form" :model="testForm" :labelStyle="labelStyle">
					<u-form-item labelWidth='85' label="姓名" clearable prop="testingName" required>
						<view class="formInput">
							<u-input placeholder="请输入姓名" border="none" fontSize="26rpx" color="#333" v-model="testForm.testingName" clearable></u-input>
						</view>
					</u-form-item>
					<u-form-item labelWidth='85' label="手机号" clearable prop="testingMobile" required>
						<view class="formInput">
							<u-input placeholder="请输入手机号" border="none" fontSize="26rpx" color="#333"  v-model="testForm.testingMobile" clearable></u-input>
						</view>
					</u-form-item>
					<u-form-item labelWidth='85' label="所在地址" clearable required v-if="delivery == 0" prop="testingRegion">
						<view class="formInput" @click="open_add">
							<view style="width:430rpx ;" >
								<u-text :text="testForm.testingRegion ? testForm.testingRegion :address" size="26rpx" :color="testForm.testingRegion ? '#333' : '#c0c4cc'" />
							</view>
							<u-icon size="28rpx" name="arrow-down"></u-icon>
						</view>
						<!-- 城市选择器 -->
						<u-picker
							:show="show"
							ref="uPicker"
							:columns="columns"
							@confirm="confirm"
							@close="pickerClose"
							cancelText="重置" 
							closeOnClickOverlay 
							@cancel="reset"
							@change="changeHandler"
						></u-picker>
					</u-form-item>
					<u-form-item labelWidth='85' label="详细地址" clearable required v-if="delivery == 0" prop="testingAddress">
						<view class="formInput">
							<u-input placeholder="请输入详细地址" border="none" fontSize="26rpx" color="#333"  v-model="testForm.testingAddress" clearable></u-input>
						</view>
					</u-form-item>
				</u-form>
				<view class="lq_btn" @click="to_back">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { address } from '@/utils/address.js';
	import { consignee } from '@/api/receive';
	export default {
		data() {
			return {
				delivery:'0',//提货方式
				labelStyle: {
					fontSize: '28rpx',
					color: '#333',
					fontWeight: 'bold'
				},
				 //显示选择器
				show: false,
				columns: [],
				origiData: address,  //获取到的原始数据
				value:"", 
				address:'选择省/市/区',
				currentStep: 0,
				iconStyle: 'fontSize:28rpx',
				testForm:{
					testingName: '',
					testingMobile:'',
					testingRegion:'',
					testingAddress:'',
					id:''
				},
				testFormRules: {
					testingName: [{ required: true, message: '请填写姓名' }],
					testingRegion: [{ required: true, message: '请填写所在地址' }],
					testingAddress: [{ required: true, message: '请填写详细地址' }],
					testingMobile: [{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: "手机号格式不正确",
						trigger: ["blur"],
					},],
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.testFormRules);
		},
		onLoad(options) {
			this.loading = true;
			this.testForm.testingName = options.name;
			this.id = options.id;
			this.couponNum = options.couponNum
			this.testForm.testingMobile = options.mobile;
		},
		mounted() {
			this.handelData();
		},
		onUnload() {
			uni.reLaunch({
				url: '/pages_myMeeting/receive/index'
			})
		},
		methods: {
			reset(){//重置按钮
				var _this = this
				_this.testForm.testingRegion = ''
				setTimeout(() => {
					_this.show = false
				}, 500);
			},
			pickerClose(){
				this.show = false
			},
			to_back(){//点击提交 到待回寄
				const that = this;
				this.$refs.form
					.validate()
					.then(res => {
						// uni.$u.toast('校验通过');
						const params = {
							id : this.id,
							consigneeType: this.delivery,//发货方式
							consigneeName: that.testForm.testingName, //名字
							consigneePhone: that.testForm.testingMobile, //手机号
							consigneeRegion: that.testForm.testingRegion, //地区
							consigneeAddress: that.testForm.testingAddress, //地区
						};
						consignee(params).then(res => {
							uni.$u.toast('提交成功');
							uni.$u.sleep(500).then(() => {
								uni.$u.route({
									url: 'pages_receive/back_success/other',
									params: {
										delivery: this.delivery,
									},
								});
							});
						});
					})
					.catch(errors => {
						// uni.$u.toast('校验失败');
					});
			},
			open_add(){
				this.show = true
			},
			//初始化开始数据
			handelData() {
				let sheng = [];
				let shi = [];
				let qu = [];
				this.origiData.forEach(item => {
					sheng.push(item.value);
					// 设置出初始化的数据
					if (item.value == '北京市') {
						item.children.forEach(child => {
							shi.push(child.value);
			
							if (child.value == '市辖区') {
								child.children.forEach(el => {
									qu.push(el.value);
								});
							}
						});
					}
				});
				this.columns.push(
					JSON.parse(JSON.stringify(sheng)),
					JSON.parse(JSON.stringify(shi)),
					JSON.parse(JSON.stringify(qu))
				);
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					this.origiData.forEach(item => {
						if (value[0] == item.value) {
							let shi = [];
							let flag = item.children[0].value;
							item.children.forEach((val, ol) => {
								shi.push(val.value);
								if (shi[0] == flag) {   //设置默认开关（选择省份后设置默认城市）
									flag = '';
									let qu = [];
									val.children.forEach(vol => {
										qu.push(vol.value);
									});
									picker.setColumnValues(2, qu);
								}
							});
							picker.setColumnValues(1, shi);
						}
					});
				}
				//当第二列变化时，第三列对应变化
				if (columnIndex === 1) {
					this.origiData.forEach(item => {
						if (value[0] == item.value) {
							let shi = [];
							item.children.forEach((val, ol) => {
								shi.push(val.value);
								if (value[1] == val.value) {
									let qu = [];
									val.children.forEach(vol => {
										qu.push(vol.value);
									});
									picker.setColumnValues(2, qu);
								}
							});
						}
					});
				}
			},
			// 确认选中的数据
			confirm(e) {
				this.testForm.testingRegion=e.value[0]+e.value[1]+e.value[2]
				this.show = false;
			}
		},
	}
</script>

<style lang="scss">
	.formInput{
		// width: 498rpx;
		height: 66rpx;
		background: #F3F3F3;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding:0 20rpx ;
	}
	.lq_btn{
		width: 100%;
		height: 74rpx;
		border-radius: 37rpx;
		line-height: 74rpx;
		color: #fff;
		background-color: #588BF3;
		text-align: center;
		font-size: 28rpx;
		margin-top:264rpx;
	}
	.tested_by {
		background: #588BF3;
		width: 100%;
		height: 200rpx;
		color: #333333;
		padding-top: 40rpx;
	}

	.tested {
		background: #FFF;
		width: 100%;
		height: 100vh;
		border-radius: 40rpx 40rpx 0px 0px;
	}

	.steps {
		// height: 196rpx;
		// background-color: #aff;
		padding: 50rpx 40rpx 84rpx;
	}
</style>
